<template>
  <div id="divId" style="padding: 24px; width: 100%; height: calc(100% - 70px)">
    <!-- 通过多选框，状态选择，修改饼图显示 -->
    <!-- 卡片 -->
    <div style="height: 50%; width: 100%; display: flex; align-items: center">
      <!-- <el-col style=""> -->
      <!-- 第一行 -->
      <!-- <el-row :gutter="20" style="padding: 5px;a"> -->
      <!-- 第一行 的 第一列 -->

      <!-- <el-col :span="12" style="display: flex; align-items: center"> -->
      <el-card class="box-card_row1">
        <div slot="header" class="clearfix">
          <span>参数选择</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >参数选择</el-button
          >
        </div>
        <div class="app-container">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="班级">
              <el-select
                v-model="form.region"
                placeholder="请选择你的班级"
                style="width: 50%"
              >
                <el-option label="1 班" value="shanghai" />
                <el-option label="2 班" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-col :span="10">
                <el-date-picker
                  v-model="form.date1"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
              <el-col :span="1" class="line">-</el-col>
              <el-col :span="10">
                <el-time-picker
                  v-model="form.date2"
                  type="fixed-time"
                  placeholder="选择时间"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="状态选择">
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="认真学习" name="type" />
                <el-checkbox label="低头睡觉" name="type" />
                <el-checkbox label="交头接耳" name="type" />
                <el-checkbox label="玩手机" name="type" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="得分计算">
              <el-col :span="15">
                <el-input v-model="form.desc" type="textarea" />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">导出记录</el-button>
              <el-button @click="onCancel">清空选择</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <!-- </el-col> -->
      <!-- 第一行 的 第二列 -->
      <el-col :span="12">
        <el-card class="box-card_row2">
          <div id="analysis_charts">tubiao</div>
        </el-card>
      </el-col>
      <!-- </el-row> -->
    </div>
    <div
      style="
        height: calc(50% - 12px);
        width: 100%;
        margin-top: 24px;
        padding: 12px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border: 1px solid #ebeef5;
      "
    >
      <!-- 第二行 -->
      <!-- <el-row
        ><el-col :span="24"> -->
      <!-- <el-card class="box-card_row2"> -->
      <!-- <div slot="header" class="clearfix">
          <span>折线图</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >操作按钮</el-button
          >
        </div> -->
      <div id="analysis_charts_times" style="height: 100%; width: 100%"></div>
      <!-- </el-card> -->
      <!-- </el-col
      ></el-row> -->
    </div>

    <!-- </el-col> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: document.documentElement.clientWidth, //屏幕宽度
      screenHeight: document.documentElement.clientHeight, //屏幕高度
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      option: {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '认真学习' },
              { value: 30, name: '低头睡觉' },
              { value: 35, name: '交头接耳' },
              { value: 10, name: '玩手机' }
            ]
          }
        ]
      },
      option_times: {
        title: {
          text: '折线图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Study', 'Sleep', 'Phone', 'Talk', 'Real Numbers']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '14:00',
              '14:10',
              '14:20',
              '14:30',
              '14:40',
              '14:50',
              '15:00'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Study',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [10, 12, 11, 13, 9, 23, 21]
          },
          {
            name: 'Sleep',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [22, 12, 11, 23, 29, 30, 30]
          },
          {
            name: 'Phone',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [10, 22, 21, 15, 19, 30, 40]
          },
          {
            name: 'Talk',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [30, 32, 11, 34, 30, 30, 20]
          },
          {
            name: 'Real Numbers',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [20, 32, 21, 34, 29, 13, 20]
          }
        ]
      }
    }
  },
  watch: {
    screenWidth: function (val) {
      //监听屏幕宽度变化
      var oIframe = document.getElementById(divId)
      oIframe.style.width = Number(val) - 120 + 'px' //'120'是页面布局调整，可
    },
    screenHeight: function () {
      //监听屏幕高度变化
      var oIframe = document.getElementById(divId)
      oIframe.style.height = Number(val) - 120 + 'px' //'120'是页面布局调整，可去除
    }
  },
  mounted() {
    this.initCharts()
    this.initCharts_times()

    this.$$nextTick(() => {
      window.addEventListener('resize', () => {
        var myChart_times = this.$echarts.init(
          document.getElementById('analysis_charts_times')
        )
        // var myChart = echarts.init(document.getElementById('main))
        myChart_times.setOption(this.option_times)
      })
    })
    window.onresize = function () {
      // 定义窗口大小变更通知事件
      this.screenWidth = document.documentElement.clientWidth //窗口宽度
      this.screenHeight = document.documentElement.clientHeight //窗口高度
    }
  },
  // mounted:function() {
  //   var myChart = echarts.init(document.getElementById('main))
  //   myChart.setOption(this.option);
  // },
  methods: {
    onSubmit() {
      this.$message('导出成功!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    initCharts() {
      var myChart = this.$echarts.init(
        document.getElementById('analysis_charts')
      )
      // var myChart = echarts.init(document.getElementById('main))
      myChart.setOption(this.option)
    },
    initCharts_times() {
      var myChart_times = this.$echarts.init(
        document.getElementById('analysis_charts_times')
      )
      // var myChart = echarts.init(document.getElementById('main))
      myChart_times.setOption(this.option_times)
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

#left_side {
  width: 600px;
  margin-top: 10px;
}

#analysis_charts {
  width: 100%;
  height: 550px;
}

#analysis_charts_times {
  width: 100%;
  height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card_row1 {
  height: 100%;
  width: calc(50% - 24px);
  margin-right: 24px;
}
.box-card_row2 {
  height: 100%;
  width: 100%;
}
</style>

